import { defineComponent } from 'vue'
import { NModal } from 'naive-ui'
import { format } from 'date-fns'
import { parseTime } from '@/common/common'

const ResourcePropertyModal = defineComponent({
  name: 'ResourcePropertyModal',
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    resource: {
      type: Object,
      required: true
    }
  },
  emits: ['modalShowChange'],
  methods: {
    onCloseClick() {
      this.$emit('modalShowChange', false)
    }
  },
  render() {
    return (
      <NModal
        show={this.showModal}
        mask-closable={false}
        style='width: 400px'
        title={window.$t('taskManage.resourceProperty')}
        bordered={false}
        size='huge'
        preset='dialog'
        onClose={this.onCloseClick}
      >
        <table>
          <tbody>
            <tr>
              <td>{window.$t('taskManage.resourceName')}&nbsp;&nbsp;</td>
              <td>{this.resource.name}</td>
            </tr>
            <tr>
              <td>{window.$t('taskManage.resourceType')}&nbsp;&nbsp;</td>
              <td>{this.resource.resourceType}</td>
            </tr>
            <tr>
              <td>{window.$t('taskManage.creator')}&nbsp;&nbsp;</td>
              <td>{this.resource.creator}</td>
            </tr>
            <tr>
              <td>{window.$t('common.description')}&nbsp;&nbsp;</td>
              <td>{this.resource.description}</td>
            </tr>
            <tr>
              <td>{window.$t('common.createTime')}&nbsp;&nbsp;</td>
              <td>
                {this.resource.createTime
                  ? format(
                      parseTime(this.resource.createTime),
                      'yyyy-MM-dd HH:mm:ss'
                    )
                  : ''}
              </td>
            </tr>
            <tr>
              <td>{window.$t('common.updateTime')}&nbsp;&nbsp;</td>
              <td>
                {this.resource.updateTime
                  ? format(
                      parseTime(this.resource.updateTime),
                      'yyyy-MM-dd HH:mm:ss'
                    )
                  : ''}
              </td>
            </tr>
          </tbody>
        </table>
      </NModal>
    )
  }
})

export default ResourcePropertyModal
